// 什么是副作用函数？(side effect function)
// 在执行过程对外部环境产生可观测的影响的函数。比如：修改全局变量/外部资源（读写文件、发请求、dom操作）/影响其他函数

// 副作用函数是响应式更新的核心
// 副作用函数在执行时会去访问响应式数据，会去触发track收集依赖；在更新响应式数据的时候，会通过trigger去触发所有关联的副作用函数重新执行

// 简单实现一个更新页面的副作用函数
// 更新dom的内容函数
function effect(value) {
  let dom = document.getElementById("app");
  dom.innerHTML = value;
}

let person = {
  name: "soup",
  like: ["dance"],
};
let p = reactive(person);

const effectSet = new Set(); // 一个响应式数据对应多个副作用函数
// 使用set形式是为了去重，避免重复副作用函数

function __isObject(obj) {
  return typeof obj === "object" && obj !== null;
}
function reactive(obj) {
  return new Proxy(obj, {
    get(target, prop) {
      return target[prop];
    },
    set(target, prop, value) {
      if (__isObject(value)) {
        target[prop] = reactive(value);
      } else {
        target[prop] = value;
      }
      // **在重新赋值的时候更新页面
      effect(target[prop]);

      // 执行多个副作用函数
      effectSet.forEach((fn) => fn());
      return true;
    },
  });
}
function effect1() {
  console.log("副作用函数执行1");
}
function effect2() {
  console.log("副作用函数执行2");
}
effectSet.add(effect1);
effectSet.add(effect1);
effectSet.add(effect2);
console.log('effectSet', effectSet);

setTimeout(() => {
  p.name = "11";
}, 1000);

// 小结：
// 1、响应式是一个过程，有触发者（调用set），在set的时候通知所有的响应者去执行副作用函数
// 2、通过proxy去代理源数据
// 3、在proxy的set操作中去重新执行副作用函数

// 这里会产生两个问题
// 1.effectSet很明显不能被外部访问
// 2.所有的副作用函数都放在effectSet中，当触发set操作时，会执行所有的副作用函数
// 进入./effect-v1.js

